<template>
  <div class="content-box">
    <div class="tab-box">
      <el-tabs v-model="activeName" @tab-click="scrollTo">
        <el-tab-pane label="施工信息" name="1" v-if="$fieldShowFunc('21-sgxx')"></el-tab-pane>
        <el-tab-pane label="图纸信息" name="2" v-if="$fieldShowFunc('21-tzxx')"></el-tab-pane>
        <el-tab-pane label="施工进度" name="3" v-if="$fieldShowFunc('21-sgjd')"></el-tab-pane>
        <el-tab-pane label="售后进度" name="4" v-if="$fieldShowFunc('21-shjd')"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="scroll-view-box">
      <div class="data-box-left" v-if="dataObj">
        <div class="user-title-box" ref="1" v-if="$fieldShowFunc('21-sgxx')">施工信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="项目名称" v-if="$fieldShowFunc('sg_xmmc')">
            <div class="justify_8" slot="label">项目名称</div>
            {{ dataObj.project_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="项目编号" v-if="$fieldShowFunc('sg_xmbh')">
            <div class="justify_8" slot="label">项目编号</div>
            <el-button @click="goToProjectFunc" type="text" style="padding: 0;">{{ dataObj.project_number || '--'
            }}</el-button>
          </el-descriptions-item>
          <el-descriptions-item label="项目品牌" v-if="$fieldShowFunc('sg_xmpp')">
            <div class="justify_8" slot="label">项目品牌</div>
            {{ dataObj.brand_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="项目类型" v-if="$fieldShowFunc('sg_xmlx')">
            <div class="justify_8" slot="label">项目类型</div>
            {{ dataObj.store_type_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="勘场类型" v-if="$fieldShowFunc('sg_kclx')">
            <div class="justify_8" slot="label">勘场类型</div>
            <span v-if="dataObj.survey_site == 1">无需勘场</span>
            <span v-if="dataObj.survey_site == 2">实地勘场</span>
            <span v-if="dataObj.survey_site == 3">勘场出图</span>
          </el-descriptions-item>
          <el-descriptions-item label="施工工程经理" v-if="$fieldShowFunc('sg_sggcjl')">
            <div class="justify_8" slot="label">施工工程经理</div>
            {{ dataObj.engineering_manager_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="工程监理" v-if="$fieldShowFunc('sg_gcjl')">
            <div class="justify_8" slot="label">工程监理</div>
            {{ dataObj.engineering_supervision_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="施工工长" v-if="$fieldShowFunc('sg_sggz')">
            <div class="justify_8" slot="label">施工工长</div>
            {{ dataObj.foreman_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="合同开工日期" v-if="$fieldShowFunc('sg_htkgrq')">
            <div class="justify_8" slot="label">合同开工日期</div>
            {{ dataObj.contract_commencement_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="合同完工日期" v-if="$fieldShowFunc('sg_htwgrq')">
            <div class="justify_8" slot="label">合同完工日期</div>
            {{ dataObj.contract_completion_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="合同工期" v-if="$fieldShowFunc('sg_htgq')">
            <div class="justify_8" slot="label">合同工期</div>
            {{ dataObj.contract_duration_days ? dataObj.contract_duration_days + '天' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(1, 0, 0)" :key="key"></el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box" ref="2" v-if="$fieldShowFunc('21-tzxx')">图纸信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="平面图文件" v-if="$fieldShowFunc('sg_pmtwj')">
            <div class="justify_8" slot="label">平面图文件</div>
            <div class="file-box-img-box flex ac" v-if="dataObj.design_drawing.plan_drawing?.length">
              <div class="file-box-img" v-for="(item, index) in dataObj.design_drawing.plan_drawing" :key="index">
                <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
              </div>
            </div>
            <span v-if="!dataObj.design_drawing.plan_drawing.length">--</span>
          </el-descriptions-item>
          <el-descriptions-item label="效果图文件" v-if="$fieldShowFunc('sg_xgtwj')">
            <div class="justify_8" slot="label">效果图文件</div>
            <div class="file-box-img-box flex ac" v-if="dataObj.design_drawing.effect_drawing?.length">
              <div class="file-box-img" v-for="(item, index) in dataObj.design_drawing.effect_drawing" :key="index">
                <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
              </div>
            </div>
            <span v-if="!dataObj.design_drawing.effect_drawing.length">--</span>
          </el-descriptions-item>
          <el-descriptions-item label="施工图文件" v-if="$fieldShowFunc('sg_sgtwj')">
            <div class="justify_8" slot="label">施工图文件</div>
            <div class="file-box-img-box flex ac" v-if="dataObj.design_drawing.construction_drawing?.length">
              <div class="file-box-img" v-for="(item, index) in dataObj.design_drawing.construction_drawing"
                :key="index">
                <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
              </div>
            </div>
            <span v-if="!dataObj.design_drawing.construction_drawing.length">--</span>
          </el-descriptions-item>
          <el-descriptions-item label="其他文件" v-if="$fieldShowFunc('sg_qtwj')">
            <div class="justify_8" slot="label">其他文件</div>
            <div class="file-box-img-box flex ac" v-if="dataObj.design_drawing.other_file?.length">
              <div class="file-box-img" v-for="(item, index) in dataObj.design_drawing.other_file" :key="index">
                <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
              </div>
            </div>
            <span v-if="!dataObj.design_drawing.other_file.length">--</span>
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(1, 0, 1)" :key="key"></el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box" ref="3" v-if="$fieldShowFunc('21-sgjd')">施工进度</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="施工进度" v-if="$fieldShowFunc('sg_sgjd')">
            <div class="justify_8" slot="label">施工进度</div>
            <span v-if="dataObj.construction_status == 42">待进场</span>
            <span v-if="dataObj.construction_status == 45">施工中</span>
            <span v-if="dataObj.construction_status == 50">已完工</span>
            <span v-if="dataObj.construction_status == 60">质保中</span>
            <span v-if="dataObj.construction_status == 70">质保到期</span>
          </el-descriptions-item>
          <el-descriptions-item label="验收进度" v-if="$fieldShowFunc('sg_ysjd')">
            <div class="justify_8" slot="label">验收进度</div>
            {{ dataObj.acceptance_progress || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="实际开工日期" v-if="$fieldShowFunc('sg_sjkgrq')">
            <div class="justify_8" slot="label">实际开工日期</div>
            {{ dataObj.on_site_start_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="实际完工日期" v-if="$fieldShowFunc('sg_sjwgrq')">
            <div class="justify_8" slot="label">实际完工日期</div>
            {{ dataObj.actual_completion_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="实际工期" v-if="$fieldShowFunc('sg_sjgq')">
            <div class="justify_8" slot="label">实际工期</div>
            {{ dataObj.actual_duration ? dataObj.actual_duration + '天' : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="收尾完成时间" v-if="$fieldShowFunc('sg_swwcsj')">
            <div class="justify_8" slot="label">收尾完成时间</div>
            {{ dataObj.closeout_complete_date ? dataObj.closeout_complete_date : '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="风险标签" v-if="$fieldShowFunc('sg_fxbq')">
            <div class="justify_8" slot="label">风险标签</div>
            {{ dataObj.risk_label || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="超期类型" v-if="$fieldShowFunc('sg_cqlx')">
            <div class="justify_8" slot="label">超期类型</div>
            {{ dataObj.overdue_type || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="超期原因" v-if="$fieldShowFunc('sg_cqyy')">
            <div class="justify_8" slot="label">超期原因</div>
            {{ dataObj.reason_overdue || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="超期计划完工日期" v-if="$fieldShowFunc('sg_cqjhwgrq')">
            <div class="justify_8" slot="label">超期计划完工日期</div>
            {{ dataObj.overdue_completion_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="最新日志时间" v-if="$fieldShowFunc('sg_zxrzsj')">
            <div class="justify_8" slot="label">最新日志时间</div>
            {{ dataObj.log_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="最新施工阶段" v-if="$fieldShowFunc('sg_zxsgjd')">
            <div class="justify_8" slot="label">最新施工阶段</div>
            {{ dataObj.construction_stage || '--' }}
          </el-descriptions-item>
          <el-descriptions-item :span="3" label="最新施工内容" v-if="$fieldShowFunc('sg_zxsgnr')">
            <div class="justify_8" slot="label">最新施工内容</div>
            {{ dataObj.content || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="现场照片/视频" v-if="$fieldShowFunc('sg_xczpsp')">
            <div class="justify_8" slot="label">现场照片/视频</div>
            <div class="file-box-img-box flex ac" v-if="dataObj.constructionFiles?.length">
              <div class="file-box-img" v-for="(item, index) in dataObj.constructionFiles" :key="index">
                <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
              </div>
            </div>
            <span v-if="!dataObj.constructionFiles.length">--</span>
          </el-descriptions-item>
          <el-descriptions-item label="已整改" v-if="$fieldShowFunc('sg_yzg')">
            <div class="justify_8" slot="label">已整改</div>
            <span v-if="$isPer(permission, ['constructionDetail_zgdDetail']) && Number(dataObj.rectified)"
              class="click-color" @click="rectifiedFunc(30)">{{
                dataObj.rectified }}项</span>
            <span v-else>{{ dataObj.rectified }}项</span>
          </el-descriptions-item>
          <el-descriptions-item label="未整改" v-if="$fieldShowFunc('sg_wzg')">
            <div class="justify_8" slot="label">未整改</div>
            <span v-if="$isPer(permission, ['constructionDetail_zgdDetail']) && Number(dataObj.not_rectified)"
              class="click-color" @click="rectifiedFunc(40)">{{
                dataObj.not_rectified
              }}项</span>
            <span v-else>{{ dataObj.not_rectified }}项</span>
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(1, 0, 2)" :key="key"></el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box" ref="4" v-if="$fieldShowFunc('21-shjd')">售后进度</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item :span="1" label="已完成" v-if="$fieldShowFunc('sg_shywc')">
            <div class="justify_8" slot="label">已完成</div>
            <span v-if="$isPer(permission, ['constructionDetail_shList']) && Number(dataObj.after_sales_completed)"
              class=" click-color" @click="afterSalesFunc(3)">{{
                dataObj.after_sales_completed }}次</span>
            <span v-else>{{ dataObj.after_sales_completed }}次</span>
          </el-descriptions-item>
          <el-descriptions-item :span="1" label="未完成" v-if="$fieldShowFunc('sg_shwwc')">
            <div class="justify_8" slot="label">未完成</div>
            <span v-if="$isPer(permission, ['constructionDetail_shList']) && Number(dataObj.after_sales_not_completed)"
              class=" click-color" @click="afterSalesFunc(4)">{{
                dataObj.after_sales_not_completed }}次</span>
            <span v-else>{{ dataObj.after_sales_not_completed }}次</span>
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(1, 0, 3)" :key="key"></el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>
<script>
import engineeringApi from '@/api/engineeringApi';

export default {
  name: 'constructionDetailPage',
  data() {
    return {
      activeName: "1",
      dataObj: "",
      permission: [],//操作权限
    };
  },
  computed: {

  },
  mounted() {
    // 操作权限
    this.$getHtmlAuthority('/constructionManagement').then(res => {
      console.log(res, "getHtmlAuthority");
      this.permission = res.data.permission;
    })
    this.engineeringProjectDetails();
  },
  methods: {
    // 查看售后信息
    afterSalesFunc(after_status) {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/afterSalesManagement',
        query: {
          project_name: this.dataObj.project_name,
          after_status
        }
      })
    },
    // 查看整改单
    rectifiedFunc(rectification_status) {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/rectificationForm',
        query: {
          project_name: this.dataObj.project_name,
          rectification_status
        }
      })
    },
    scrollTo() {
      const element = this.$refs[this.activeName];
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    },
    // 项目详情
    engineeringProjectDetails() {
      if (!this.$route.query.id) return;
      engineeringApi.engineeringProjectDetails({
        project_id: this.$route.query.id
      }).then(res => {
        console.log(res, "项目详情")
        if (res.code == 200) {
          this.dataObj = res.data;
        }
      })
    },
    // 去项目详情
    goToProjectFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/projectDetailNew',
        query: {
          id: this.dataObj.id
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
@import '@/styles/detail.scss';
@import './index.scss';
</style>
<style lang="scss">
.labelClassName3 {
  width: 160px;
  background: rgba(0, 0, 0, 0) !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: none !important;
  opacity: 0;
}

.contentClassName3 {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
  border: none !important;
  opacity: 0;
}
</style>